// import CountUI from "../../components/Count";
// import store from '../../redux/store'
// 引入connect用于连接UI与redux
import { connect } from 'react-redux';
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction,
} from '../../redux/actions/count';
import React, { Component } from 'react'

class Count extends Component {

  increment = () => {
    const { value } = this.selectNumber;
    this.props.increment(Number(value));
  }

  decrement = () => {
    const { value } = this.selectNumber;
    this.props.decrement(Number(value));
  }

  incrementIfOdd = () => {
    const { value } = this.selectNumber;
    const { count } = this.props;
    count % 2 === 1 && this.props.increment(Number(value));
  }

  incrementAsync = () => {
    const { value } = this.selectNumber;
    this.props.asyncIncrement(Number(value), 500);
  }

  render() {
    return (
      <div>
        <h1>当前求和为:{this.props.count},下方组件总人数为{this.props.persons.length}</h1>
        <select ref={c => this.selectNumber = c} name="" id="">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.incrementIfOdd}>当前为奇数加</button>
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({ count: state.count, persons: state.persons });
const mapDispatchToProps = {
  increment: createIncrementAction,
  decrement: createDecrementAction,
  asyncIncrement: createIncrementAsyncAction,
}
export default connect(mapStateToProps, mapDispatchToProps)(Count);